<template>
  <div>
    <div class="bottom-container">
      <van-nav-bar title="配送员设置" left-text="返回" left-arrow @click-left="leftClick" />
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-list v-model="listLoading" :finished="finished"
          :finished-text="list.length == 0 ? '我们还没有伙计哦' : '我们就这么多伙计啦'" @load="onLoad">
          <div class="sender__item" v-for="item in list">
            <div class="sender__el sender__name">
              <div class="sender__name__text">{{item.name}}</div>
              <div class="sender__name__bucket">{{item.sendNum}}桶</div>
            </div>
            <div class="sender__el">
              <div class="sender__el__tit">联系方式：</div>
              <div class="sender__el__content">{{item.phone}}</div>
            </div>
            <div class="sender__el">
              <div class="sender__el__tit">基本工资：</div>
              <div class="sender__el__content">{{item.baseSum}}</div>
            </div>
            <div class="sender__el">
              <div class="sender__el__tit">销售提成：</div>
              <div class="sender__el__content">{{item.sendPercentage}}</div>
            </div>
            <div class="sender__el sender__control">
              <van-button size="mini" type="primary" @click="edit(item)">编辑</van-button>
              <van-button size="mini" type="danger" plain @click="del(item)">删除</van-button>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-button class="bottom-btn" size="large" type="info" @click="add">新增配送员</van-button>
    <van-dialog v-model="show" title="配送员设置" show-cancel-button :before-close="beforeClose">
      <div class="sender__edit">
        <van-field v-model="name" label="姓名" clearable v-validate="'required'" data-vv-name="姓名"
          :error-message="errors.first('姓名')" required placeholder="请输入姓名" />
        <van-field v-model="phone" label="联系方式" clearable v-validate="'required|mobile'" data-vv-name="联系方式"
          :error-message="errors.first('联系方式')" required placeholder="请输入联系方式" />
        <van-field v-model="sendPercentage" label="销售提成" clearable v-validate="'required'" data-vv-name="销售提成"
          :error-message="errors.first('销售提成')" required placeholder="请输入销售提成" />
        <van-field v-model="baseSum" label="基本工资" clearable v-validate="'required'" data-vv-name="基本工资"
          :error-message="errors.first('基本工资')" required placeholder="请输入基本工资" />
        <van-field v-model="sendNum" v-if="editId !== ''" label="送水量" clearable v-validate="'required'"
          data-vv-name="送水量" :error-message="errors.first('送水量')" required placeholder="请输入送水量" />
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {
    GET_SENDER_LIST,
    ADD_SENDER,
    DEL_SENDER,
    EDIT_SENDER,
    HAS_SENDER
  } from '@/api/sender';
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        editId: '',
        name: '',
        phone: '',
        sendPercentage: '',
        baseSum: '',
        sendNum: '',
        show: false,
        refreshLoading: false,
        listLoading: false,
        finished: false,
        currPage: 1,
        pageSize: 5,
        list: [],
      }
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        this.$reqPost(GET_SENDER_LIST, {
          page: this.currPage,
          rows: this.pageSize,
          stationId: this.stationInfo.id
        }).then(res => {
          this.refreshLoading = false;
          this.listLoading = false;
          if (this.list.length == res.total) {
            this.finished = true;
          }
          this.list.push(...res.rows);
        })
      },
      //确认保存
      confirm(done) {
        let param = {
          name: this.name,
          phone: this.phone,
          stationId: this.stationInfo.id,
          baseSum: this.baseSum,
          sendPercentage: this.sendPercentage
        }

        let params = new URLSearchParams();
        params.append('carrierName', this.name);
        params.append('phone', this.phone);



        if (this.editId == '') {
          //判断重复
          this.$reqPost(HAS_SENDER, params).then(res => {
            if (res.data == 1) {
              this.$toast('该配送员已存在哦');
              done(false);
            } else {
              done()
              this.$reqPost(ADD_SENDER, param).then(res => {
                this.$toast('新增成功');
                this.onRefresh();
              });
            }
          });
        } else {
          param.id = this.editId;
          param.sendNum = this.sendNum;
          this.$reqPost(EDIT_SENDER, param).then(res => {
            done();
            this.$toast('修改成功');
            this.onRefresh();
          });
        }
      },
      beforeClose(action, done) {
        if (action == 'cancel') {
          done();
        } else {
          this.$validator.validateAll().then((result) => {
            if (result) {
              // done();
              this.confirm(done);
            } else {
              done(false);
            }
          });
        }
      },
      //新增置空
      add() {
        this.editId = '',
        this.name = '';
        this.phone = '';
        this.sendPercentage = '';
        this.baseSum = '';
        this.sendNum = '';
        this.show = true;
        this.$validator.reset();
      },
      //编辑回显
      edit(item) {
        this.editId = item.id;
        this.name = item.name;
        this.phone = item.phone;
        this.sendPercentage = item.sendPercentage;
        this.baseSum = item.baseSum;
        this.sendNum = item.sendNum;
        this.show = true;
      },
      //删除
      del(item) {
        this.$dialog.confirm({
          title: '标题',
          message: '确认删除？'
        }).then(() => {
          this.$reqPost(DEL_SENDER + '?carrierId=' + item.id).then(res => {
            this.$toast.success('删除成功');
            this.onRefresh();
          });
        }).catch(() => {
          // on cancel
        });
      },
      leftClick() {
        this.$router.go(-1)
      },
      //刷新
      onRefresh() {
        this.list = [];
        this.currPage = 1;
        this.finished = false;
        this.refreshLoading = true;
        this.getList();
      },
      onLoad() {
        this.listLoading = true;
        this.refreshLoading = true;
        this.currPage++;
        this.getList();
      },
    }
  }

</script>
<style lang="less" scoped>
  @import '../../styles/variable.less';
  .sender__item {
    // display: flex;
    // justify-content: space-between;
    margin: 10px 10px 0 10px;
    padding: 10px;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    font-size: 14px;

    .sender__el {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      &.sender__name {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        .sender__name__text{
        }
        .sender__name__bucket{
          color: @col-the;
        }
      }

      .sender__el__tit{
        color: #999;
      }
      .sender__el__content{
        color: #333;
      }

      &.sender__control {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .sender__edit {
    padding: 10px;
  }

</style>
